@extends('layouts/app')
{{--添加菜单--}}
@section('content')
<div class="weui-pay append">
    {{--菜名--}}
    <div class="site weui-cells_checkbox">
        <div class="weui-cell ">
            <div class="weui-cell__hd">
                <label for="name" >菜名:</label>
            </div>
            <div class="weui-cell__bd">
                <input class="weui-input" name="dishes_name" placeholder="请填写菜名">
            </div>
        </div>
    </div>
    {{--价格--}}
    <div class="site weui-cells_checkbox">
        <div class="weui-cell ">
            <div class="weui-cell__hd">
                <label for="name" >价格:</label>
            </div>
            <div class="weui-cell__bd">
                <input class="weui-input" name="price" type="number" pattern="[0-9]*" placeholder="100">
            </div>
            <div class="weui-cell__dd">
                <label for="name" >元</label>
            </div>
        </div>
    </div>
    {{--选择类型--}}

    <div class="weui-cell site">
        <div class="weui-cell__hd">
            <label for="date" class="weui-label">选择分类:</label>
        </div>
        <div class="weui-cell__bd">
            <input class="weui-input" id="menu_id" type="text" name="menu_id" placeholder="请选分类">
        </div>
    </div>

    {{--推荐热卖特价--}}
    <div class="site weui-cells_checkbox">
        <div class="weui-cell haticum ">
            <div class="weui-cell referrer">
                <label class=" weui-cell__hd attractive" >
                    <div class="weui-cell__dd">
                        <input type="checkbox" type="number" pattern="[0-9]*" disabled="disabled" class="weui-check" id="s12">
                        <i class="weui-icon-checked"></i>
                    </div>
                </label>
                <div class="weui-cell__hd">
                    <label for="name" >推荐</label>
                </div>
            </div>
            <div class="weui-cell referrer">
                <label class=" weui-cell__hd attractive" >
                    <div class="weui-cell__dd">
                        <input type="checkbox" type="number" pattern="[0-9]*" disabled="disabled" class="weui-check" id="s13">
                        <i class="weui-icon-checked"></i>
                    </div>
                </label>
                <div class="weui-cell__hd">
                    <label for="name" >热卖</label>
                </div>
            </div>
            <div class="weui-cell referrer ">
                <label class=" weui-cell__hd attractive" >
                    <div class="weui-cell__d">
                        <input type="checkbox" type="number" pattern="[0-9]*" class="weui-check discount" id="s14">
                        <i class="weui-icon-checked"></i>
                    </div>
                </label>
                <div class="weui-cell__hd">
                    <label for="name" >特价</label>
                </div>
            </div>
        </div>

    </div>
    {{--特价折扣--}}
    <div class="site weui-cells_checkbox zk" style="display: none;">
        <div class="weui-cell ">
            <div class="weui-cell__hd">
                <label for="name" >折扣:</label>
            </div>
            <div class="weui-cell__bd">
                <input class="weui-input" type="number" pattern="[0-9]*" name="discount" value="1" placeholder="0.8">
            </div>
        </div>
    </div>
    {{--菜品规格--}}
    <div class="site weui-cells_checkbox spec-box">
        <div class="weui-cell padding">
            <div class="weui-cell__hd">
                <label for="" >多规格:</label>
            </div>
            <div class="weui-cell__hd">
                <input class="weui-input" name="spceName" type="text" placeholder="请输入规格名称">
            </div>
            <div class="weui-cell__ft">
                <a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_default add-more-panel">添加</a>
            </div>
        </div>
        {{--<div class="weui-cell padding">--}}
            {{--<div class="weui-cell__hd">--}}
                {{--<label for="" >分量:</label>--}}
            {{--</div>--}}
            {{--<div class="weui-cell__hd">--}}
                {{--<input class="weui-input" type="text" placeholder="属性">--}}
            {{--</div>--}}
            {{--<div class="weui-cell__ft">--}}
                {{--<input class="weui-input" type="text" placeholder="价格">--}}
            {{--</div>--}}
        {{--</div>--}}
        {{--<div class="spec-panel padding">--}}
            {{--<div class="spec-title f30 gary6">分量</div>--}}
            {{--<div class="spec-list row">--}}
                {{--<div class="col-5">--}}
                    {{--<input type="text" class="f28 gary3" placeholder="属性">--}}
                {{--</div>--}}
                {{--<div class="col-5">--}}
                    {{--<input type="text" class="f28 gary3" placeholder="价格">--}}
                {{--</div>--}}
                {{--<div class="col-2 text-center">--}}
                    {{--<p class="change-btn del">&times;</p>--}}
                {{--</div>--}}
            {{--</div>--}}

            {{--<div class="close">&times;</div>--}}
        {{--</div>--}}
    </div>

    {{--菜品介绍--}}
    <div class="site weui-cells_checkbox">
        <div class="weui-cell ">
            <div class="weui-cell__hd referral">
                <label for="description"  >介绍:</label>
            </div>

            <div class="weui-cell__bd">
                <textarea class="weui-textarea" id="description" name="description" placeholder="请填写简介" rows="2"></textarea>
            </div>
        </div>
    </div>
    {{--视频图片表单thumb--}}
    <div class="site weui-cells_checkbox">
        <div class="weui-cells_checkbox ">

            <div class="weui-grids storeH  picture">
                <h5 class="picture-video f36">图片/视频:</h5>
                <div class="weui-cell__td video get-img">
                    <label for="uploaderInput">
                        <img src="/img/erha1.png" alt="" >
                    </label>
                </div>
                <div class="weui-uploader__input-box pull-right" style="display: none;">
                    <form action="" id="img-form">
                        @csrf
                        <input id="uploaderInput" name="thumb" class="weui-uploader__input" type="file" accept="image/*" multiple="" onchange="saveImg('/uploadImg', '#img-form', showHead)">
                    </form>
                </div>
            </div>
        </div>
    </div>
    {{--提交确认按钮--}}
    <div class="demos-content-padded">
        <a href="javascript:;" class="weui-btn weui-btn_blue open-popup ">确认</a>
    </div>
</div>

<script>
    var id  = getRequest().sid;
    var data = [],
        values = [];


    // 获取菜品分类列表
    function getFoodType () {
        $.post("/api/shop_menu/all", {shop_id: id}, function (res) {
            if (typeof res === 'string') {
                res = JSON.parse(res);
            }
            // 格式化菜品分类，好显示
            var data = getMyTypeData(res.data);

            if (res.data.length < 1) {
                return $.alert("您还没有添加任何菜品分类");
            }
            // 点击选择菜品分类
            $("#menu_id").select({
                title: "请选择菜品分类",
                items: data
            });

        });
    }
    getFoodType();


    // 点击添加新菜品
    $(".open-popup").click(function(){
       var data={};
        data['shop_id'] = id;

         //菜名
        data['dishes_name'] =$("input[name='dishes_name']").val();
        data['price'] =$("input[name='price']").val();
        data['menu_id'] =$("input[name='menu_id']").attr("data-values");
        data['description'] =$("textarea[name='description']").val();

        //打折         description
        data['discount'] =$("input[name='discount']").val();
        data ['thumb'] = "";
        $('.face-img img').each(function () {
            var src = $(this).attr('src');
            data['thumb'] += src + ' ; ';
        });

        // 多规格

        data['spec_arr'] = getSpceData();

        if (data['spec_arr'].length > 0) {
            data['is_attr'] = 1;
        } else {
            data['is_attr'] = 0;
        }

        if (!data['dishes_name']) {
             return $.toast("菜名不能为空", "text");
        } else if (!data['price']) {
            return $.toast("价格不能为空", "text");
        } else if (!data['menu_id']) {
            return $.toast("分类不能为空", "text");
        }


        console.log("data", data);
        $.post("/api/shop_dish/add",data,function(res){
           console.log("res",res);
            if(typeof res === 'string'){
                res =JSON.parse(res);
            }
            $.alert (res.info, function () {
                if(res.code ===200){
                    history.go(-1);
                }
            });
        });

    });



    // 格式化菜品分类
    function getMyTypeData (data) {
        var ldata =[];
        for (var i = 0, len = data.length; i < len; i++) {
            ldata.push({
                title: data[i].menu_name,
                value: data[i].id
            });
        }

        return ldata;
    }



    //折扣输入框
    $("#s14").change(function () {
        var fool = $(this).prop("checked");

        console.log("fool", fool);
        if (fool) {
            $(".zk").show();
        } else {
            $(".zk").hide();
        }
    });


    function showHead(img) {

        if(img.code==200) {
            var htmlText = [];
            htmlText.push('<div class="weui-cell__td video">');
            htmlText.push('<label class="face-img" for="uploaderInput">');
            htmlText.push('<img src=' + img.data + ' class="myimg"/>');
            htmlText.push('</label>');
            htmlText.push('</div>');
            console.log("htmlText", htmlText);
            $(".get-img").before(htmlText.join(''));
        }else{
            $.toast(img.info, 'text');
        }
    }



    // 点击已经生成的规格
    $(".more-spec").on("click", ".more-text", function () {
        var has = $(this).hasClass("active");
        if (has) {
            $(this).removeClass("active");
        } else {
            $(this).addClass("active");
        }
    });

    // 添加一个面板
    $(".add-more-panel").click(function () {
        var htmlText = [],
            spceName = $("input[name='spceName']").val();

        console.log("spceName", spceName);
        if (!spceName) {
            return $.toast("规格名称不能为空", "text");
        }


        htmlText.push('<div class="spec-panel padding">');
        htmlText.push('<div class="spec-title f30 gary6">');
        htmlText.push(spceName);
        htmlText.push('</div>');
        htmlText.push('<div class="spec-list row">');
        htmlText.push('<div class="col-5">');
        htmlText.push('<input type="text" class="arrt-name f28 gary3" placeholder="属性">');
        htmlText.push('</div>');
        htmlText.push('<div class="col-5">');
        htmlText.push('<input  class="price f28 gary3" type="number" pattern="[0-9]*" placeholder="价格">');
        htmlText.push('</div>');
        htmlText.push('<div class="col-2 text-center">');
        htmlText.push('<p class="change-btn add">+</p>');
        htmlText.push('</div>');
        htmlText.push('</div>');
        htmlText.push('<div class="close">&times;</div>');
        htmlText.push('</div>');


        $(".spec-box").append(htmlText.join(''));
        $("input[name='spceName']").val('');

    });

    // 删除一个面板

    $(".spec-box").on("click", ".close", function () {
        console.log("6666");
        $(this).parent(".spec-panel").remove();
    });

    // 添加一个小框
    $(".spec-box").on("click", ".change-btn.add", function () {
        var htmlText = [];

        htmlText.push('<div class="spec-list row">');
        htmlText.push('<div class="col-5">');
        htmlText.push('<input type="text" class="arrt-name f28 gary3" placeholder="属性">');
        htmlText.push('</div>');
        htmlText.push('<div class="col-5">');
        htmlText.push('<input class="price f28 gary3" type="number" pattern="[0-9]*" placeholder="价格">');
        htmlText.push('</div>');
        htmlText.push('<div class="col-2 text-center">');
        htmlText.push('<p class="change-btn add">+</p>');
        htmlText.push('</div>');
        htmlText.push('</div>');

        $(this).parents(".spec-list").after(htmlText.join(''));
        $(this).parents(".spec-list").find(".col-2").html('<p class="change-btn del">&times;</p>')

    });

    // 删除一个小框
    $(".spec-box").on("click", ".change-btn.del", function () {
        $(this).parents(".spec-list").remove();
    });

    // 获取多规格数据
    function getSpceData () {

        var spec_arr = [],
            spec = [];
        $(".spec-panel").each(function (index, value) {
            var title = $(value).find(".spec-title").text();
            console.log("index", index);
            var str = "";
            var len = $(value).find(".spec-list").length;
            $(value).find(".spec-list").each(function (i, v) {
                console.log("i", i);
                var arrtName = $(v).find(".arrt-name").val(),
                    price = $(v).find(".price").val();

                if (!price) {
                    price = 0;
                }
                if (i < len - 1) {
                    str += arrtName + "|" + price + ' , ';
                } else {
                    str += arrtName + "|" + price
                }

            });
            spec_arr.push({attribute: title, spec: str});
        });
        console.log("spec_arr", spec_arr);

        return spec_arr;

    }
</script>

@endsection
@extends('layouts/footer')
